<template>
	<view class="toplist">
		<h4>官方榜</h4>
		<ul>
			<li v-for="(item,index) in info" :key="item.id" @click="jump(item.id)">
				<view class="img">
					<!--  #ifdef  MP-WEIXIN -->
					<image :src="item.coverImgUrl"></image>
					<!--  #endif -->
					<!--  #ifndef  MP-WEIXIN -->
					<img  v-lazy="item.coverImgUrl"> 
					<!--  #endif -->
				</view>
				<ul>
					<li v-for="(childItem,index) in item.tracks" :key="index">
						<text>{{index + 1}}. </text>
						<text>{{childItem.first}} - {{childItem.second}}</text>
					</li>
				</ul>
			</li>
		</ul>
	</view>
</template>

<script>
	import {detail} from '../../api/paihang/paihang.js'
	export default {
		data() {
			return {
				info:[]
			}
		},
		methods:{
			jump(id){
				this.$emit('jump',id)
			}
		},
		created(){
			detail().then(res => {
				this.info.push(res.list[0])
				this.info.push(res.list[1])
				this.info.push(res.list[2])
				this.info.push(res.list[3])
			})
		}
	}
</script>

<style lang="scss">
	.toplist{
		margin-bottom: 100rpx;
		h4{
			margin-top: 20rpx;
			margin-left: 20rpx;
			margin-bottom: 30rpx;
		}
		ul{
			padding: 0;
			li{
				display: flex;
				margin: 0 20rpx;
				padding: 6rpx 0;
				height: 200rpx;
				border-bottom: 2rpx solid #e4e4e4;
				.img{
					flex: 0 0 200rpx;
					width: 200rpx;
					height: 200rpx;
					/*  #ifdef  MP-WEIXIN  */
					image{
						border-radius: 6rpx;
						width: 100%;
						height: 100%;
					}
					/*  #endif  */
					/*  #ifndef  MP-WEIXIN  */
					img{
						border-radius: 6rpx;
						width: 100%;
						height: 100%;
					}
					/*  #endif  */
				}
				ul{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 0 40rpx;
					height: 200rpx;
					overflow: hidden;
					color: #2e3030;
					font-size: 24rpx;
					li{
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						line-height: 60rpx;
					}
				}
			}
		}
	}	
</style>
